<template>
  <div class="resource-review-container">
    <!-- 包含审核内容的卡片 -->
    <div class="review-card">
      <!-- 卡片的头部部分 -->
      <div class="header-section">
        <!-- 页面标题 -->
        <h1 class="title">资源申请审核</h1>
        <!-- 装饰线 -->
        <div class="decorative-line"></div>
      </div>

      <!-- Element UI 表格，用于展示资源申请列表 -->
      <!-- :data="applicationList" 绑定表格数据为 applicationList -->
      <!-- stripe 为表格添加斑马纹样式 -->
      <!-- :header-cell-style 定义表头单元格的样式 -->
      <el-table :data="applicationList" stripe :header-cell-style="{ backgroundColor: 'aliceblue', color: '#666' }" empty-text="暂无数据">
        <!-- 申请人列，绑定数据中的 username 属性 -->
        <el-table-column prop="username" label="申请人"></el-table-column>
        <!-- 申请项目列，绑定数据中的 projectName 属性 -->
        <el-table-column prop="projectName" label="申请项目"></el-table-column>
        <!-- 资源类型列 -->
        <el-table-column prop="resourceType" label="资源类型">
          <!-- 自定义单元格模板 -->
          <template #default="{ row }">
            <!-- 调用 getResourceTypeLabel 方法将资源类型值转换为标签显示 -->
            {{ getResourceTypeLabel(row.resourcesType) }}
          </template>
        </el-table-column>

        <!-- 申请描述列，绑定数据中的 describe 属性 -->
        <el-table-column prop="describes" label="申请描述"></el-table-column>

        <el-table-column prop="amount" label="申请金额"></el-table-column>

        <!-- 审核状态列 -->
        <el-table-column prop="states" label="审核状态">
          <!-- 自定义单元格模板 -->
          <template #default="{ row }">
            <!-- 调用 getReviewStatusLabel 方法将审核状态值转换为标签显示 -->
            {{ getReviewStatusLabel(row.states) }}
          </template>
        </el-table-column>
        <!-- 审核意见列，绑定数据中的 reviewComment 属性 -->
        <el-table-column label="审核意见" prop="reviewComment"></el-table-column>
        <!-- 操作列 -->
        <el-table-column label="操作">
          <!-- 自定义单元格模板 -->
          <template #default="{ row }">
            <!-- 通过按钮，仅当申请处于待审核状态时显示 -->
            <!-- @click="approveApplication(row)" 点击按钮调用 approveApplication 方法 -->
            <el-button
                v-if="row.states === '0'"
                type="success"
                size="mini"
                @click="approveApplication(row)"
            >
              通过
            </el-button>
            <!-- 拒绝按钮，仅当申请处于待审核状态时显示 -->
            <!-- @click="rejectApplication(row)" 点击按钮调用 rejectApplication 方法 -->
            <el-button
                v-if="row.states === '0'"
                type="danger"
                size="mini"
                @click="rejectApplication(row)"
            >
              拒绝
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 审核对话框，用于输入审核信息 -->
      <!-- :visible.sync="reviewDialogVisible" 双向绑定对话框的显示状态 -->
      <el-dialog :visible.sync="reviewDialogVisible" title="审核申请">
        <!-- 审核表单，绑定审核数据和验证规则 -->
        <!-- :model="reviewForm" 绑定表单数据为 reviewForm -->
        <!-- :rules="reviewFormRules" 绑定表单验证规则 -->
        <!-- ref="reviewFormRef" 用于引用表单实例 -->
        <el-form :model="reviewForm" :rules="reviewFormRules" ref="reviewFormRef" label-width="120px">
          <!-- 审核状态表单项 -->
          <el-form-item label="审核状态" prop="states">
            <!-- 单选框组，绑定审核状态 -->
            <el-radio-group v-model="reviewForm.reviewStatus">
              <!-- 通过单选框 -->
              <el-radio label="approved">通过</el-radio>
              <!-- 拒绝单选框 -->
              <el-radio label="rejected">拒绝</el-radio>
            </el-radio-group>
          </el-form-item>
          <!-- 审核意见表单项 -->
          <el-form-item label="审核意见" prop="reviewComment">
            <!-- 文本输入框，用于输入审核意见 -->
            <el-input
                type="textarea"
                v-model="reviewForm.reviewComment"
                placeholder="请输入审核意见"
                :rows="4"
                class="custom-textarea"
                :resize="'none'"
                :maxlength="500"
            >
              <!-- 显示已输入字符数和最大字符数 -->
              <template #append>
                <div class="word-counter">
                  {{ reviewForm.reviewComment.length }}/500
                </div>
              </template>
            </el-input>
          </el-form-item>
        </el-form>
        <!-- 对话框底部操作按钮 -->
        <template #footer>
          <!-- 取消按钮，点击关闭对话框 -->
          <el-button @click="reviewDialogVisible = false">取消</el-button>
          <!-- 提交审核按钮，点击调用 submitReview 方法 -->
          <el-button type="primary" @click="submitReview">提交审核</el-button>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 存储资源申请列表数据
      applicationList: [],
      // 控制审核对话框的显示与隐藏
      reviewDialogVisible: false,
      // 审核表单数据
      reviewForm: {
        // 申请的 ID
        id: null,
        // 审核状态，默认为通过
        reviewStatus: 'approved',
        // 审核意见
        reviewComment: ''
      },
      // 审核表单的验证规则
      reviewFormRules: {
        // 审核状态验证规则
        reviewStatus: [
          { required: true, message: '请选择审核状态', trigger: 'change' }
        ],
        // 审核意见验证规则
        reviewComment: [
          { required: true, message: '请输入审核意见', trigger: 'blur' },
          { min: 5, message: '审核意见至少5个字符', trigger: 'blur' }
        ]
      },
      // 资源类型列表
      resourceTypes: [
        { label: '资金', value: 'funding' },
        { label: '指导', value: 'mentorship' },
        { label: '办公空间', value: 'office_space' }
      ]
    };
  },
  // 组件创建完成后调用的钩子函数
  created() {
    // 加载资源申请列表
    this.loadApplications();
  },
  methods: {
    // 加载资源申请列表的方法
    loadApplications() {
      // 发送 GET 请求获取资源申请列表
      this.$request.get('/resource/list')
          .then(res => {
            // 将响应数据赋值给 applicationList
            this.applicationList = res.data;
            console.log(res.data);
          })
          .catch(err => {
            console.error('Load Applications Error:', err); // 调试信息
            this.$message.error('加载申请列表失败');
          });
    },
    // 根据资源类型值获取对应的标签
    getResourceTypeLabel(value) {
      // 在 resourceTypes 数组中查找匹配的资源类型
      const type = this.resourceTypes.find(item => item.value === value);
      // 如果找到则返回标签，否则返回原始值
      return type ? type.label : value;
    },

    // 根据审核状态值获取对应的标签
    getReviewStatusLabel(status) {
      // 根据不同的审核状态返回对应的标签
      switch (status) {
        case '0':
          return '待审核';
        case '1':
          return '已通过';
        case '2':
          return '已拒绝';
        default:
          return status;
      }
    },
    // 处理通过申请的方法
    approveApplication(row) {
      // 将当前申请的 ID 赋值给审核表单
      this.reviewForm.id = row.id;
      // 设置审核状态为通过
      this.reviewForm.reviewStatus = 'approved';
      // 显示审核对话框
      this.reviewDialogVisible = true;
    },
    // 处理拒绝申请的方法
    rejectApplication(row) {
      // 将当前申请的 ID 赋值给审核表单
      this.reviewForm.id = row.id;
      // 设置审核状态为拒绝
      this.reviewForm.reviewStatus = 'rejected';
      // 显示审核对话框
      this.reviewDialogVisible = true;
    },
    // 提交审核信息的方法
    async submitReview() {
      try {
        // 验证审核表单数据
        await this.$refs.reviewFormRef.validate();
        // 发送 POST 请求提交审核信息
        await this.$request.post('/resource/applicationReview', this.reviewForm);
        // 显示审核提交成功的消息
        this.$message.success('审核提交成功！');
        // 关闭审核对话框
        this.reviewDialogVisible = false;
        // 重新加载资源申请列表
        this.loadApplications();
      } catch (error) {
        // 显示审核信息填写错误的消息
        this.$message.warning('请正确填写审核信息');
      }
    }
  }
};
</script>

<style scoped>
/* 资源申请审核界面的容器样式 */
.resource-review-container {
  background: #f0f2f5;
  min-height: 100vh;
  padding: 40px 20px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

/* 包含审核内容的卡片样式 */
.review-card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  padding: 32px;
  width: 100%;
  max-width: 1200px;
  transition: all 0.3s ease;
}

/* 卡片头部部分的样式 */
.header-section {
  margin-bottom: 20px;
}

/* 页面标题样式 */
.title {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 10px;
}

/* 装饰线样式 */
.decorative-line {
  height: 2px;
  background: #e0e0e0;
}

/* 显示字符数的样式 */
.word-counter {
  color: #909399;
  font-size: 12px;
  padding: 0 8px;
}
</style>



